<form nz-form [formGroup]="addForm" class="ant-advanced-search-form" (ngSubmit)="onAction($event)">
    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username">用户名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="username" placeholder="用户名称" />
            @if (editMode == modeEnum.ADD) {
            <div *ngIf="submitted && fm['username'].invalid" class="alert">
                <div *ngIf="fm['username'].errors?.['rquired']">用户名不能为空</div>
                <div *ngIf="fm['username'].errors?.['minlength']">用户名长度不小于2</div>
                <div *ngIf="fm['username'].errors?.['maxlength']">用户名长度不超过20</div>
            </div>
            }
        </nz-form-control>
    </nz-form-item>

    @if (editMode == modeEnum.ADD) {
    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password">用户密码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input [type]="passwordVisible ? 'text' : 'password'" nz-input formControlName="password" placeholder="用户密码"
                id="password" />
            <div *ngIf="submitted && fm['password'].invalid" class="alert">
                <div *ngIf="fm['password'].errors?.['rquired']">密码不能为空</div>
                <div *ngIf="fm['password'].errors?.['minlength']">密码长度不小于6</div>
                <div *ngIf="fm['password'].errors?.['maxlength']">密码长度不超过20</div>
            </div>
        </nz-form-control>
    </nz-form-item>
    }

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickName">用户昵称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="nickName" placeholder="用户昵称" id="nickName" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="deptId">归属部门</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-tree-select style="width: 250px;" [nzExpandedKeys]="expandKeys" [nzNodes]="deptNodes"
                [(ngModel)]="selectedNode" [ngModelOptions]="{standalone: true}" nzPlaceHolder="Please select"
                (ngModelChange)="onChange($event)">
            </nz-tree-select>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber">电话号码</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="phoneNumber" placeholder="电话号码" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">电子邮箱</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="email" placeholder="电子邮箱" id="email" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sex">性别</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select class="user-sex" name="sex" formControlName="sex">
                <nz-option *ngFor="let sex of sexes" [nzValue]="sex.key" [nzLabel]="sex.display"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="enabled">状态</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select class="user-enabled" name="enabled" [(ngModel)]="selectedEnabled"
                [ngModelOptions]="{standalone: true}" [nzAllowClear]="true">
                <nz-option [nzValue]="true" nzLabel="正常"></nz-option>
                <nz-option [nzValue]="false" nzLabel="停用"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="remark">备注</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <textarea rows="4" nz-input formControlName="remark"></textarea>
        </nz-form-control>
    </nz-form-item>


    <div nz-row nzJustify="end">
        <div nz-col class="search-area">
            @if (editMode == modeEnum.ADD) {
            <button nz-button class="action-button" [nzType]="'primary'">添加</button>
            } @else {
            <button nz-button class="action-button" [nzType]="'primary'">修改</button>
            }
            <button nz-button class="action-button" (click)="onCancel($event)">取消</button>
        </div>
    </div>

</form>